<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户登陆</title>
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="css/index.css">
	<style>
		body{
			padding: 0;
			margin: 0;
		}
		#mynavbar .nav{
			margin-left: 640px;
		}
		.container .row .col-md-8 .addimg img{
			padding-left: 300px;
		}
		.container .row .col-md-8 .col-md-2 a{
			font-size: 20px;
			color: black;
		}
		.container .row .col-md-8 .col-md-2 a:hover{
			color: #ff5d1f;
		}
		.container .row .col-md-8 .col-md-2{
			padding-top: 10px;
		}
		/*首页结束*/
		.fixed-bg2 {
		    background-image: url("https://sqimg.qq.com/qq_product_operations/im/2015/update/avds.jpg");
		    min-height: 500px;
		    /*height: 500px;*/
		    background-attachment: fixed;
		    background-position: center;
		    background-repeat: no-repeat;
		    background-size: cover;
		    margin-top: 30px;
		    padding-top: 70px;
		    /*padding-bottom: 30px;*/
		}
		.fixed-bg2 .container{
			border-radius: 5px;
			margin-bottom: 70px;
		}
		.fixed-bg2 .container .chooseus{
			font-size: 30px;
			color: blue;
		}
		.fixed-bg2 .container p{
			font-size: 20px;
			text-align: center;
		}
		.fixed-bg2 .forgetpw{
			padding-left: 500px;
		}
		.fixed-bg2 .yzm{
			position: absolute;
			top: 0px;
			left: 350px;
		}
		#msg{
			display: inline-block;
			width: 50px;
			height: 30px;
			/*border: 1px solid red;*/
			padding-top: -50px;
			background: #E0FFFF;
			text-align: center;
			line-height: 30px;
		}
		.fixed-bg2 .form-horizontal{
			padding-top: 50px;
		}
		.fixed-bg2 .glyphicon{
			font-size: 10px;
		}
		/*登陆背景结束*/
		.clearfix:after{
			visibility:hidden;
			display:block;
			font-size:0;
			content:" ";
			clear:both;height:0
		}
		*html .clearfix{height:1%}


		.map-service{
			position:relative;
			height:760px;
			background:url(img/map_balck_whole_bg.jpg) center no-repeat
		}
		.map-service-right{
			margin-left:414px;
			padding-top:60px
		}
		.china-map{
			width:748px;
			height:618px;
			background:url(img/map_black_bg.png) center no-repeat;
			position:relative;
		}
		.region-list{
			position:absolute;
			left:0;
			top:0
		}

		@-webkit-keyframes warn{
		0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}
		100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}
		}
		@-moz-keyframes warn{
		0%{-moz-transform:scale(0);transform:scale(0);opacity:1}
		100%{-moz-transform:scale(1);transform:scale(1);opacity:0}
		}
		@-o-keyframes warn{
		0%{-o-transform:scale(0);transform:scale(0);opacity:1}
		100%{-o-transform:scale(1);transform:scale(1);opacity:0}
		}
		@keyframes warn{
		0%{
			-webkit-transform:scale(0);
			-moz-transform:scale(0);
			-o-transform:scale(0);
			transform:scale(0);
			opacity:1
		}
		100%{
			-webkit-transform:scale(1);
			-moz-transform:scale(1);
			-o-transform:scale(1);
			transform:scale(1);
			opacity:0
		}
		}
		.area-box .dot{
			position:absolute;
			left:0;
			width:10px;
			height:10px;
			-webkit-border-radius:50%;
			-moz-border-radius:50%;
			border-radius:50%;
			background:#a2a9b4;
			opacity:1;
			filter:alpha(opacity=100)
		}
		.area-box .pulse{
			position:absolute;
			top:-28px;
			left:-28px;
			height:66px;
			width:66px;
			border:2px solid #b7b7b7;
			-webkit-border-radius:48px;
			-moz-border-radius:48px;
			border-radius:48px;
			-webkit-box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;
			-moz-box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;
			box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;opacity:.12;
			filter:alpha(opacity=0);
			-webkit-animation:warn 2s ease-out both;
			-moz-animation:warn 2s ease-out both;
			-o-animation:warn 2s ease-out both;
			animation:warn 2s ease-out both;
			-webkit-animation-iteration-count:infinite;
			-moz-animation-iteration-count:infinite;
			-o-animation-iteration-count:infinite;
			animation-iteration-count:infinite;
			background:0 0
		}
		.area-box .delay-01{
			-webkit-animation-delay:0;
			-moz-animation-delay:0;
			-o-animation-delay:0;
			animation-delay:0
		}
		.area-box .delay-02{-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-o-animation-delay:.4s;animation-delay:.4s}
		.area-box .delay-03{-webkit-animation-delay:.8s;-moz-animation-delay:.8s;-o-animation-delay:.8s;animation-delay:.8s}
		.area-box .delay-04{-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;-o-animation-delay:1.2s;animation-delay:1.2s}
		.area-box .delay-05{-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;-o-animation-delay:1.6s;animation-delay:1.6s}
		.area-box .delay-06{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}
		.area-box .delay-07{-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;-o-animation-delay:2.4s;animation-delay:2.4s}
		.area-box .delay-08{-webkit-animation-delay:-.4s;-moz-animation-delay:-.4s;-o-animation-delay:-.4s;animation-delay:-.4s}
		.area-box .delay-09{-webkit-animation-delay:-.8s;-moz-animation-delay:-.8s;-o-animation-delay:-.8s;animation-delay:-.8s}
		.area-box .delay-10{-webkit-animation-delay:-1.2s;-moz-animation-delay:-1.2s;-o-animation-delay:-1.2s;animation-delay:-1.2s}
		.area-box .delay-11{-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}
		.region-list.active .area-box .dot{background:#009fd9}
		.region-list.active .area-box .pulse{border-color:#009fd9;top:-39px;left:-39px;height:88px;width:88px;-webkit-box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset;-moz-box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset;box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset}
		.region-list.waite .area-box .dot{background:#f90}
		.region-list.waite .area-box .pulse{border-color:#f90}
		.show-regin{position:absolute;left:2px;height:0;top:0;width:11px;opacity:0;-o-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
		.online-node .show-regin,.region-list:hover .show-regin,.underline-node .show-regin,.waite-node .show-regin{height:127px;opacity:1}
		.show-regin span{width:80px;position:absolute;left:8px;top:-11px;padding:6px 10px;font-size:14px;color:#ccc;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;text-align:center;white-space:nowrap;}
		.postition-10 .show-regin span{left:0}
		.postition-6 .show-regin span{left:-72px}
		.area-box{z-index:77}
		.show-regin{z-index:66}
		.region-list.active .show-regin span{position:relative;color:#ccc}
		.region-list.waite .show-regin span{color:#ccc}
		.postition-1{left:302px;top:308px}
		.postition-2{left:401px;top:403px}
		.postition-3{left:358px;top:516px}
		.postition-4{left:473px;top:348px}
		.postition-5{left:526px;top:394px}
		.postition-6{left:526px;top:515px}
		.postition-7{left:652px;top:200px}
		.postition-7.region-list.active .area-box .pulse{top:-50px;left:-50px;width:110px;height:110px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
		.postition-8{left:559px;top:229px}
		.postition-9{left:637px;top:371px}
		.postition-9.region-list.active .area-box .pulse{top:-50px;left:-50px;width:110px;height:110px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
		.postition-10{left:554px;top:539px}
		.postition-11{left:604px;top:300px}
		.postition-13{left:470px;top:250px}
		.douhao{width:0}
		.map-service .container .col-md-4{
			color: white;
			margin-top: 150px;
		}
	</style>
</head>
<body>
	<!-- 导航栏开始 -->
	<div class="dontainer">
		<nav class="navbar navbar-default"  role="navigation"><!-- navbar-default -->
			<div class="col-md-4">
				<div class="navbar-header  navbar-right">
					<span class="navbar-brand">TS家教欢迎您!</span>
					<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
			</div>
			<div class="col-md-8">
				<div id="mynavbar" class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li><a href="Register.html"><span class="glyphicon glyphicon-user"></span>注册</a></li>
						<li><a href="Login.html"><span class="glyphicon glyphicon-lock"></span>登陆</a></li>
					</ul>
				</div>
			</div>
		</nav> 
	</div>
	<!-- 导航栏结束 -->

	<!-- 首页开始 -->
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<img src="img/logo.png" alt="">
			</div>
			<div class="col-md-8">
				<div class="addimg">
					<img src="img/tel.png" alt="">
				</div>
				<div class="col-md-2">
					<a href="index.html">首页</a>
				</div>
				<div class="col-md-2">
					<a href="">学员库</a>
				</div>				
				<div class="col-md-2">
					<a href="">教员库</a>
				</div>				
				<div class="col-md-2">
					<a href="">家教头条</a>
				</div>				
				<div class="col-md-2">
					<a href="">资料下载</a>
				</div>				
				<div class="col-md-2">
					<a href="">关于我们</a>
				</div>
			</div>
		</div>
	</div>
	<!-- 首页结束 -->

	<!-- 登陆页面开始 -->
	<div class="fixed-bg2">
			<div class="container" style="background: white;">
				<p><span class="chooseus">选择我们</span>金牌名师家教网竭力提供规范化、专业化的服务，让家长与教员放心的平台。</p>
				<div class="row">
					<div class="col-md-6">
						<h2 class="page-header">用户登陆</h2>
						<form action="login" class="form-horizontal">
							<div class="form-group">
								<label for="" class="control-label col-md-2">手机号</label>
								<div class="col-md-10">
									<input type="text" class="form-control" name="logname" placeholder="请输入手机号">
								</div>
							</div>							
							<div class="form-group">
								<label for="" class="control-label col-md-2">密码</label>
								<div class="col-md-10">
									<input type="password" class="form-control" name="password" placeholder="请输入密码">
								</div>
							</div>															
							<div class="form-group forgetpw"><!-- 复选框 -->
								<a href="" class=""><strong class="text-success">忘记密码?</strong></a>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-md-2">验证码</label>
								<div class="col-md-10">
									<input type="text" class="form-control"  placeholder="请输入验证码" style="width: 300px;">
									<div class="yzm">
										<span id="msg"></span>
										<button class="btn btn-default" onclick="show()">刷新</button>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label for="" class="col-md-2"></label>
								<div class="col-md-10">
									<button class="btn btn-primary"><span class="glyphicon glyphicon-lock"></span>我要登陆</button>
									<button class="btn btn-danger"><span class="glyphicon glyphicon-user"></span>我要注册</button>
								</div>	
						</form>
					</div>
				</div>
				<div class="col-md-6">
					<h2 class="page-header">关注金牌名师家教网微信公众号</h2>
					<img src="img/wm.gif" alt="" style="margin-left: 100px;margin-top: 20px;">
				</div>
			</div>
	</div>
	<!-- 登陆页面结束 -->

	<!-- 页尾部分开始 -->
		<div class="map-service">
			<div class="container">
				<div class="col-md-4">
					<h2>家长专线</h2>
					<h2><a href="">028-66009003</a></h2>

					<h2><a href="">400 800 8655</a></h2>

					<h2>教员专线</h2>
					<h2><a href="">028-6672 5630</a></h2>
					<p>Copyright © 2003-2013 金牌名师家教网   All rights reserved.</p>

					<p>金牌名师家教网(成都家教网)地址:成都市武侯区锦绣路1号保利中心B座1913#</p>

					<p>企业营业执照注册号：51010720211401 组织机构代码证编号：782681247-1</p>
				</div>
				<div class="map-service-right">
					<div class="china-map">
						<div class="region-list waite postition-2 waite-node">
							<div class="area-box"><span class="dot"></span><span class="pulse delay-06"></span>
								<span class="pulse delay-05"></span>
								<span class="pulse delay-04"></span></div>
							<div class="show-regin"><span>四川</span></div>
						</div>
						<div class="region-list active postition-4 waite-node">
							<div class="area-box"><span class="dot"></span><span class="pulse delay-01"></span>
								<span class="pulse delay-02"></span>
								</div>
							<div class="show-regin"><span>陕西</span></div>
						</div>
						<div class="region-list active postition-5 waite-node">
							<div class="area-box"><span class="dot"></span><span class="pulse delay-01"></span>
								<span class="pulse delay-02"></span>
								</div>
							<div class="show-regin"><span>湖北</span></div>
						</div>
						 <div class="region-list active postition-6 online-node">
							<div class="area-box">
								<span class="dot"></span>
								<span class="pulse delay-06"></span>
								<span class="pulse delay-05"></span>
								<span class="pulse delay-04"></span>
							</div>
							<div class="show-regin"><span>广东</span></div>
						</div>
						<div class="region-list active postition-13 online-node">
							<div class="area-box"><span class="dot"></span><span class="pulse delay-04"></span>
								<span class="pulse delay-05"></span>
								<span class="pulse delay-03"></span></div>
							<div class="show-regin"><span>内蒙古</span></div>
						</div>
						<div class="region-list  active  postition-11 online-node">
							<div class="area-box"><span class="dot"></span><span class="pulse delay-06"></span>
								<span class="pulse delay-05"></span>
								<span class="pulse delay-04"></span></div>
							<div class="show-regin"><span>山东</span></div>
						</div>
						<div class="region-list active postition-7 online-node">
							<div class="area-box"><span class="dot"></span><span class="pulse delay-10"></span>
								<span class="pulse delay-09"></span>
								<span class="pulse delay-08"></span></div>
							<div class="show-regin"><span>辽宁</span></div>
						</div>
						<div class="region-list waite postition-8 online-node">
							<div class="area-box"><span class="dot"></span><span class="pulse delay-06"></span>
								<span class="pulse delay-05"></span>
								<span class="pulse delay-04"></span></span></div>
							<div class="show-regin"><span>北京</span></div>
						</div>
						<div class="region-list active postition-9 online-node">
							<div class="area-box"><span class="dot"></span><span class="pulse delay-10"></span>
								<span class="pulse delay-09"></span>
								<span class="pulse delay-08"></span></div>
							<div class="show-regin"><span>江苏</span></div>
						</div>
						<div class="region-list active postition-10 online-node">
							<div class="area-box"><span class="dot"></span><span class="pulse delay-06"></span>
								<span class="pulse delay-05"></span>
								<span class="pulse delay-04"></span></div>
							<div class="show-regin"><span>香港</span></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	<!-- 页尾部分结束 -->
	<script src="js/random number.js"></script>
</body>
</html>